<template>
  <div class="message">
    <div class="mask">
      <vue-danmaku
        v-model="danmus"
        :loop="true"
        :speeds="150"
        :randomChannel="true"
        :debounce="800"
        :top="30"
        :useSlot="true"
        style="height: 100px; width: 300px"
        ref="danmu"
        class="danmus"
      >
        <template slot="dm" slot-scope="{ index, danmu }">
          <div class="bubble" :class="index == insertId ? 'insert' : ''">
            {{ danmu.content }}
          </div>
        </template>
      </vue-danmaku>
      <textarea
        type="type"
        class="massage-content"
        v-model="content"
        @keyup.enter="onSubmit"
        placeholder="Say something"
      />
    </div>
  </div>
</template>

<script>
import vueDanmaku from "vue-danmaku";
export default {
  name: "HomeViewMessage",
  components: {
    vueDanmaku,
  },
  data() {
    return {
      content: "",
      messages: [],

      danmus: [
        { id: "danmu1", content: "111" },
        { id: "danmu2", content: "222" },
        { id: "danmu3", content: "333" },
        { id: "danmu4", content: "444" },
      ],
      // 当前插入的弹幕的id, 用于控制样式
      insertId: -1,
    };
  },
  created() {
    this.getMessages();
  },
  methods: {
    getMessages() {
      this.$http.get("/messages").then((res) => {
        const { code, result } = res;
        if (code == 0) {
          this.danmus = result;
        }
      });
    },
    onSubmit() {
      if (this.content == "") {
        alert("留言内容不能为空");
        return;
      }
      let content = this.content;
      // 清空输入框
      this.content = "";
      this.$http.post("/messages", { content }).then((res) => {
        if (res.code == 0) {
          // this.getMessages()

          // 发送弹幕（插入到当前播放位置，实时显示）
          this.insertId =
            this.$refs.danmu.add({
              id: "0",
              content,
              created_time: new Date().toISOString(),
            }) - 1;
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.message {
  position: relative;
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 0;
  background-color: white;

  &::before {
    position: absolute;
    position: fixed;
    width: 100%;
    height: 100vh;
    opacity: 0.7;
  }

  .mask {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    transition: all 0.5s;
    background-color: var(--mask);

    .vue-danmaku {
      position: fixed !important;
      width: 100vw !important;
      height: 100vh !important;
    }

    textarea {
      width: 800px;
      height: 60px;
      margin-bottom: 120px;
      padding: 10px 30px;
      border: none;
      color: black;
      font-size: 27px;
      outline: 0;
      box-shadow: 2px;
      border-radius: 29px;
      z-index: 5;
    }
  }
}

.danmus {
  margin-top: 10%;
  margin-bottom: 10%;
}

.bubble {
  height: 40px;
  width: auto;
  max-width: 500px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50px;
  white-space: nowrap;
  padding: 0 20px;
  line-height: 40px;
  box-sizing: border-box;
  transition: all 0.5s;
  color: #8ed1fc;

  &:hover {
    color: #10b981;
  }

  &.insert {
    background: rgba(243, 251, 249, 1);
    color: rgba(0, 0, 0, 1);
    border: 1px solid rgba(16, 186, 140, 0.9);
  }
}
</style>
